<html lang="zh-CN" class="translated-ltr">
<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--    强制刷新、清缓存-->
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- CSS -->
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/nouislider.min.css">
    <link rel="stylesheet" href="css/select2.min.css">
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="css/ionicons.min.css">
    <link rel="stylesheet" href="css/main.css">

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="icon/favicon-32x32.png" sizes="32x32">
    <link rel="apple-touch-icon" href="icon/favicon-32x32.png">
    <link rel="apple-touch-icon" sizes="72x72" href="icon/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="icon/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="144x144" href="icon/apple-touch-icon-144x144.png">

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="Dmitry Volkov">
    <title>提问</title>
    <link type="text/css" rel="stylesheet" charset="UTF-8" href="https://translate.googleapis.com/translate_static/css/translateelement.css"></head>


<!--引入axios库-->
<script src="../js/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入VUE库 -->
<script src="../js/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!-- 引入 css -->
<link href="../wangEditor-file/monokai_sublime.min.css" rel="stylesheet">

<!-- 引入 js -->
<script src=".././wangEditor-file/wangEditor.min.js" type="text/javascript" charset="UTF-8"></script>

<!-- 引入组件库 -->
<script src="../js/js/index.js"></script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>
<div id="main">

    <main class="main main--breadcrumb">
        <!-- breadcrumb -->
        <div class="breadcrumb">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <ul class="breadcrumb__wrap">
                            <li class="breadcrumb__item"><a href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">首页</font></font></a></li>
                            <li class="breadcrumb__item breadcrumb__item--active"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">发布文章</font></font></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- end breadcrumb -->

        <div class="container">
            <div class="row">
                <div class="col-12 col-md-7 col-lg-8 col-xl-9">
                    <!-- form -->
                    <el-form ref="form" :model="form" action="#" class="form">
                        <div class="col-12">
                            <h2 class="form__title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">新问题</font></font></h2>
                        </div>
                        <el-form-item label="提问标题">
                            <el-input v-model="form.title"></el-input>
                        </el-form-item>
                        <el-form-item label="提问内容">
                        </el-form-item>

                        <el-form-item label="">
                            <!--富文本编辑器-->
                            <div id="inspectionContents" name="wang"></div>
                        </el-form-item>


                        <el-form-item label="提问模块">
                            <el-select v-model="form.module" placeholder="请选择区域">
                                <el-option v-for="(c,index) in calssify" :label="c.module" :value="c.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="悬赏积分">
                            <el-input-number v-model="form.reward" :min="0" :max="userMessages.reward" label="悬赏积分" controls-position="right"></el-input-number>
                            我的积分：{{userMessages.reward}}
                        </el-form-item>

                        <el-button @click="putpost">发布</el-button>
                    </el-form>
                    <!-- end form -->
                </div>

            </div>
        </div>
    </main>
    <!-- end main content -->

    <!-- JS -->
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/wNumb.js"></script>
    <script src="js/nouislider.min.js"></script>
    <script src="js/select2.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
    <script src="js/jquery.mCustomScrollbar.min.js"></script>
    <script src="js/main.js"></script><div id="goog-gt-tt" class="skiptranslate" dir="ltr"><div style="padding: 8px;"><div><div class="logo"><img src="https://www.gstatic.com/images/branding/product/1x/translate_24dp.png" width="20" height="20" alt="Google 翻译"></div></div></div><div class="top" style="padding: 8px; float: left; width: 100%;"><h1 class="title gray">原文</h1></div><div class="middle" style="padding: 8px;"><div class="original-text"></div></div><div class="bottom" style="padding: 8px;"><div class="activity-links"><span class="activity-link">提供更好的翻译建议</span><span class="activity-link"></span></div><div class="started-activity-container"><hr style="color: #CCC; background-color: #CCC; height: 1px; border: none;"><div class="activity-root"></div></div></div><div class="status-message" style="display: none;"></div></div>

    <div class="goog-te-spinner-pos"><div class="goog-te-spinner-animation"><svg xmlns="http://www.w3.org/2000/svg" class="goog-te-spinner" width="96px" height="96px" viewBox="0 0 66 66"><circle class="goog-te-spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg></div></div>
</div>


<footer class="grid-footer">
    <div class="footer-fixed">
        <div class="copyright">
            <div class="info">
                <div class="contact">
                    <a href="https://gitee.com/" class="github" target="_blank"><i class="fa fa-github"></i></a>
                    <a href="https://wpa.qq.com/msgrd?v=3&uin=930054439&site=qq&menu=yes" class="qq" target="_blank" title="930054439"><i class="fa fa-qq"></i></a>
                    <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=gbiysbG0tbWyuMHw8K-i7uw" class="email" target="_blank" title="930054439@qq.com"><i class="fa fa-envelope"></i></a>
                    <a href="https://github.com/" class="weixin"><i class="fa fa-github"></i></a>
                </div>
                <p class="mt05">
                    Copyright &copy; 2022-5 Knowledge Forum V.1.0.0 Power by 项目设计
                </p>
            </div>
        </div>
    </div>
</footer>
</body>

<script>
    var v=new Vue({
        el:"#main",
        data:{
            userMessages:[],
            form:{
                //标题，模块，积分
                title:"",
                module:"",
                reward:"",
            },
            //所有可选择模块
            calssify:[],
            imageUrl: '',//用户上传的文章封面
            mainbody:"",//帖子内容

            account:"121314",//登录账号
            isanswer:null,//是否为问题的回答,是，则传入问题的id
        },
        created(){
            this.reload();
            this.getmodule()
            this.getUserMessages()
        },
        methods: {
            //获取当前登录账号的信息
            getUserMessages(){
                let url="../GetUserMessagesByAccount.s"
                axios.get(url).then(res=>{
                    this.userMessages=res.data
                })
            },
            successmessage(message) {
                this.$message({
                    offset: 350,
                    showClose: true,
                    message: message,
                    type: 'success'
                });
            },
            errorwarning(message) {
                this.$message({
                    offset: 350,
                    showClose: true,
                    message: message,
                    type: 'error'
                });
            },

            //获取富文本框的内容，以html格式
            putpost(){
                /**
                 * 判空
                 */
                if(this.form.title==''){
                    this.errorwarning('标题不能为空')
                    return false;
                }
                if(editor.txt.html()==''){
                    this.errorwarning('文章不能为空')
                    return false;
                }
                //
                //拿取富文本框中的html代码   editor.txt.html().replaceAll("%","%25")
                /**
                 *axios不能读取%，会报错
                 */
                //url中也对特殊字符进行转码  &  对应  woshinidie
                this.mainbody=editor.txt.html().replaceAll("&","woshinidie")
                //% 转码，但是不需要转回去，原理未知
                this.mainbody=this.mainbody.replaceAll("%","%25")


                this.mainbody=this.mainbody.replaceAll("#","nibushiwodie")

                console.log("--------------------init putpost-----------------------")

                console.log("mainbody:"+this.mainbody)
                let url="../PutProblemServlet.s?title="+this.form.title
                url+="&module="+this.form.module
                url+="&mainbody="+this.mainbody
                url+="&account="+this.account
                url+="&reward="+(this.userMessages.reward-this.form.reward)
                console.log("jianfa=",this.userMessages.reward-this.form.reward)
                axios.get(url).then(res=>{
                    console.log("-----------init axios-----------------")
                    if(res.data=1){
                        this.$alert('提问发布成功', '提示', {
                            confirmButtonText: '确定',
                            //点击确定之后跳转到个人主页页面
                            callback: action => {
                                javascript:location.href='../index.html'
                            }
                        });
                        return false;
                    }else if(res.data<1){
                        this.errorwarning('上传失败')
                        return false;
                    }
                })
            },


            getmodule() {
                axios.get("../QueryClassify.s").then(res => {
                    this.calssify = res.data;
                })
            },
            reload() {
                this.isReload = false
                this.$nextTick(() => {
                    this.isReload = true
                })
            }
        }

    })
</script>
<script>
    var v1=new Vue({
        el:"#app1",
    })
</script>
<script>
    var v1=new Vue({
        el:"#app2",
    })
</script>
<!--wangEditor富文本框初始化-->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#inspectionContents')
    editor.config.height = 500
    editor.config.menuTooltipPosition = 'down'
    //限制图片大小  50M
    editor.config.uploadImgMaxSize = 50 * 1024 * 1024 //
    //限制图片类型
    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
    //设置 editor.config.uploadImgShowBase64 = true 可使用 base64 格式保存图片。即，可选择本地图片，编辑器用 base64 格式显示图片。
    //【注意】uploadImgShowBase64（base64 格式）和 uploadImgServer（上传图片到服务器）两者不能同时使用！！！
    editor.config.uploadImgShowBase64 = true
    editor.config.zIndex = 9
    editor.create()
</script>

</html>